<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<template v-if="viewCode === 'notice'">
			<view class="article-title">{{info.title}}</view>
			<view class="article-meta">
				{{info.createUserName}} 发起于 {{info.createTime}}</text>
			</view>
			<rich-text :nodes="info.content"></rich-text>
			<!-- <view class="article-content" v-html="info.content">
				<div class="banner-pic">
					<image src="">
					</image>
				</div>

			</view> -->
			<view class="article-foot"><u-icon name="eye" size="34rpx" color="" :label="info.visits"></u-icon>
				<!-- <u-icon
					name="thumb-up" size="34rpx" color="" label="15"></u-icon> -->
			</view>
		</template>
		<template v-if="viewCode === 'review'">
			<view class="article-title" style="display: flex;justify-content: space-between;">审批退回消息提醒
				<image class="user-images" style="height: 40px;width: 40px;" src="/static/msg/end.png"></image>
			</view>
			<view class="article-meta">
				{{info.senderName}} 审批于 {{info.createTime}}</text>
			</view>

			<view class="article-content">
				{{info.pp}}
			</view>
			<view class="article-foot" style="margin-top:50rpx">
				<u-button type="error" hoverStartTime=300 size="small" shape="circle" text="已阅"
					@click="handleBill(info)"></u-button>
			</view>
		</template>

	</view>
</template>
<script>
	/**
	 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
	 */
	function image2Base64(img) { //图片转为base64编码
		var canvas = document.createElement("canvas");
		canvas.width = img.width;
		canvas.height = img.height;
		var ctx = canvas.getContext("2d");
		ctx.drawImage(img, 0, 0, img.width, img.height);
		var dataURL = canvas.toDataURL("image/png");
		return dataURL;
	}

	function getImgBase64(aaa) { //获取base64编码
		var base64 = "";
		var img = new Image();
		img.src = aaa;
		img.onload = function() {
			base64 = image2Base64(img);
			alert(base64);
		}
	}
	import {
		getTodoAction,
		getUser
	} from '../../network/service/addressBook.js'
	export default {
		data() {
			return {
				title: '',
				info: {},
				viewCode: '',
				id: '',
			};
		},
		onLoad(option) {
			this.viewCode = option.pageType
			this.id = option.info
			//this.info = JSON.parse(option.info)
			if (option.pageType === 'notice') {
				this.title = '通知公告详情'
				// 调用接口 构建 对象
				this.getNoticeInfo()
				//调用接口 点击说明已读
				this.setReadNotice()
			} else if (option.pageType === 'review') {
				this.title = '审阅消息详情'
			} else {
				this.title = ''
			}

			//const pic = this.getDetailWebp(this.info.content)

		},
		methods: {
			navTo(url) {
				uni.navigateBack({
					url: url
				});
			},
			async getNoticeInfo() {
				let params = {
					url: '/notice/getNoticeById',
					method: 'POST',
					data: {
						uid: getUser().id,
						id: this.id,
					},
				}
				await getTodoAction(params).then(res => {
					if (res.meta.status !== "000000") {
						uni.showToast({
							icon: 'error',
							title: '查看失败' + res.data.alert_msg,
							duration: 3000
						});
						return false
					}
					this.info = res.data.list

				})
			},
			// 通知公告已读
			async setReadNotice() {
				let params = {
					url: '/notice/updateCountAndName',
					method: 'POST',
					data: {
						uid: getUser().id,
						id: this.id,
						createPerson: getUser().person,
					},
				}
				await getTodoAction(params).then(res => {
					if (res.meta.status !== "000000") {
						uni.showToast({
							icon: 'error',
							title: '查看失败' + res.data.alert_msg,
							duration: 3000
						});
						return false
					}

				})

			},
			// 审阅消息已读
			handleBill(info) {
				uni.showLoading({
					title: '查阅中...'
				});
				let params = {
					url: '/message/updateMessageToRead',
					method: 'POST',
					data: {
						uid: getUser().id,
						id: info.id,
					},
				}

				getTodoAction(params).then(res => {
					if (res.meta.status !== "000000") {
						uni.showToast({
							icon: 'error',
							title: '查阅失败' + res.data.alert_msg,
							duration: 3000
						});
						return false
					} else {
						uni.showToast({
							title: '查阅完成',
						});
						uni.hideLoading();
						let pages = getCurrentPages();
						console.log("dfdgf", pages)
						let prevPage = pages[pages.length - 2]; //上一个页面
						uni.navigateBack({
							url: '/pages/msg/list-item?pageType=review',
							success: () => {
								prevPage.$vm.getReviewList(); // 直接调用上个页面的刷新方法
							}
						});
					}

				})

			},

			getDetailWebp(htmlStr) {
				if (!htmlStr) return '';
				const reg = /<img[^>]+src=[\'|\"]?([^(?"|?'|?>)]+)[\'|\"]?[^>]*>/gi;
				if (!reg.test(htmlStr)) return htmlStr; // 内容中无图直接返回不用处理
				return htmlStr.replace(reg, function($0, $1) {
					// $0 标签，$1内容 .replace("/", "")
					let pic = $1.replace("/\/", "");
					pic = pic.replace("  ", "").replace(" ", "")

					return pic
					//return `<img src="data:image/png;base64,"${pic}"></img>`;
				})
			},

		}
	};
</script>
<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.article-title {
		font-size: 40rpx;
		font-weight: 400;
		text-align: left;
		padding-bottom: 10rpx;
		font-weight: bold;
		margin: 30rpx 30rpx 0;
		color: #333333;
	}

	.article-meta {
		padding: 10rpx 30rpx 30rpx;
		color: #999999;
		border-bottom: 1px solid #ededed;
	}

	.article-content {
		padding: 30rpx 30rpx 0rpx;
		overflow: hidden;
		font-size: 30rpx;
		line-height: 50rpx;

		/deep/ p {
			margin-bottom: 20rpx;
			text-indent: 60rpx;
		}

		.banner-pic {
			margin: 10px auto;
			text-align: center;

			uni-image {
				width: 300px;
				height: 160px;
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);

			}
		}
	}

	.article-foot {
		padding: 0 30rpx 20rpx;
		font-size: 26rpx;
		color: #999999;

		.u-icon {
			margin-right: 10px;
		}
	}
</style>